<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        /*  问题1：重置默认的样式 reset.css 和 normalize.css*/
        /* 问题2：样式和网页布局现在在同一个文件 分离 后期实现复用 */

        /* 问题3：选择器，写起来非常的繁琐，需要做简化 需要使用 css 的预处理语言（less sass）新的编程语言 前端自动化构建工具 webpack   less文件-- webpack---css文件。 c语言---编译---计算器01*/


        /* 问题4：盒子外扩，需要程序猿手工的计算宽高，非常的麻烦*/
        /* 使用另外的一种盒子模型，一般叫做怪异盒子。*/



    </style>

    <!-- 让 html 网页和 样式 index.css 产生关联，现在HTML页面要使用 index.css 文件，将 index.css 引入-->
    <!--rel relatioship 关联 stylesheet样式表-->
    <!--href 样式表的路径 1. 相对地址 2. 绝对地址-->
    <!--<link rel="stylesheet" href="./css/reset.css">-->

    <!--3. 重置文件要在我们写的其他的样式前面-->
    <link rel="stylesheet" href="./css/index.css">


</head>
<body>

<h1>案例1-浮动布局</h1>
<hr>

<div class="container">
    <!--版心-->
    <div class="content">
        <div class="title">
            <h2>助力企业降本增效，彰显核心价值</h2>
        </div>
        <ul class="list clearfix">
            <li>
                <img src="./imgs/new1.png" alt="">

                <h3>高效率过滤</h3>
                <p>高效客户资料整理，提高意向客户转化率，轻松完成量化指标。</p>
            </li>
            <li>
                <img src="./imgs/new2.png" alt="">

                <h3>高效率过滤</h3>
                <p>高效客户资料整理，提高意向客户转化率，轻松完成量化指标。</p>
            </li>

            <li>
                <img src="./imgs/new3.png" alt="">

                <h3>高效率过滤</h3>
                <p>高效客户资料整理，提高意向客户转化率，轻松完成量化指标。</p>
            </li>

            <li class="last">
                <img src="./imgs/new4.png" alt="">

                <h3>高效率过滤</h3>
                <p>高效客户资料整理，提高意向客户转化率，轻松完成量化指标。</p>
            </li>


        </ul>
    </div>
</div>

</body>
</html>